<template>
  <!-- 编程式的导航  -->
  <div>
    <!-- 方法一：直接/＋自己传的参数，但是要在router.js里面的路径里去定义，且在接收的时候用params -->
    <!-- <span @click="ck3('home/1')">home</span> -->
    <!-- 方法二：在方法里面用query或者 params，这个在router.js里面的路径里就不需要去定义-->
    <!-- <span @click="ck3('home')">home</span><br />
      <span @click="ck3('about')">about</span>
      <router-view></router-view><br />
      <button @click="letsgo">点击我前进</button>
      <button @click="back">点击我后退</button> -->
    <!-- <router-view></router-view>
      <router-view name="a"></router-view>
      <router-view name="b"></router-view> -->
    <!-- 这是vuex -->
    <h1>{{ $store.state.str }}</h1>
    <h2>{{ getNum }}</h2>
    <h1>我是：mapState--{{ getNum }}</h1>
    {{ comName }}
    <button @click="add">测试{{ this.$store.getters.comName }}</button>
    <button>奇数加一</button>
    <button>偶数加二</button>
    <hr />
    <form action="">
      <select name="" id="" v-model="manum">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
    </form>
    <h1>当前的和为：{{ this.$store.getters.comName }}</h1>
    <button @click="add">+</button>
    <button @click="aoo">-</button>
    <button @click="addto">当和为奇数时自动加一</button>
    <button @click="deadd">等一等才加</button>
    <hr />
    <h1>小仓库数据</h1>
    {{ $store.state.index.Object }}===={{
      $store.getters["index/changeObject"]
    }}=={{ $store.getters["index/changeObject"] }}
    <button @click="ex">点击修改</button>
    <hr />
    <button @click="act">点击我一下</button>
  </div>
</template>
  
  <script>
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {
      manum: 1,
    };
  },
  methods: {
    ck3(name1) {
      // push 方法跳转有历史记录  可前进和后退
      // 参数传值
      // this.$router.push({ name: name1, query: { id: 1 } });
      // this.$router.push({ name: name1, params: { id: 1 } });
      this.$router.push(`/${name1}`);
      // this.$router.push({ path: `/${name1}` });
      // replace 方法没有历史记录 不可前进和后退
      // this.$router.replace(`/${name1}`);
    },
    letsgo() {
      this.$router.go(1);
    },
    back() {
      this.$router.go(-1);
    },
    // 加一
    add() {
      this.$store.commit("changeSum", Number(this.manum));
      // 只能传一个参数，如果有多个参数可用数组或者对象
      // console.log(this.$store.commit("changeSum", 1));
    },
    // 减一
    aoo() {
      this.$store.commit("changenum", Number(this.manum));
    },
    //当和为奇数时自动加一
    addto() {
      if (
        this.$store.getters.comName % 2 == 1 ||
        this.$store.getters.comName % 2 == -1
      ) {
        this.$store.commit("changeSumto", 1);
      }
    },
    // 等一等才加
    deadd() {
      setTimeout(() => {
        this.$store.commit("deadd", Number(this.manum));
      }, 2000);
    },
    act(index) {
      this.$store.dispatch("actnum", index);
    },
    ex() {
      this.$store.commit("index/changemath");
      location.reload();
    },
    act() {
      // this.$store.dispatch("index/changechinese");
      console.log(this.$store.dispatch("index/changechinese"));
    },
  },
  created() {
    console.log(this.$store.state.str);
    console.log(this.$store.getters["index/changeObject"]);
  },
  computed: {
    ...mapState({
      getNum(state) {
        return state.num + 4;
      },
    }),
    // 接收数据
    ...mapGetters(["comName"]),
  },
};
</script>
  
  <style lang="less" scoped>
</style>